<template>
  <div class="app-container calendar-list-container">
    <!--功能查询-->
    <div class="filter-container">
      <el-row>
        <el-col :span="12">
          <el-button class="filter-item" size="small" style="margin-left: 10px;" type="primary" v-waves
                     @click="add" icon="el-icon-edit">新增
          </el-button>
          <el-button class="filter-item" size="small" style="margin-left: 10px;" type="primary" v-waves
                     @click="changeStoreArea" icon="el-icon-edit">编辑
          </el-button>
          <el-button class="filter-item" size="small" style="margin-left: 10px;" type="primary" v-waves
                     @click="modifyStoreArea('area', '0')" icon="el-icon-edit">禁用
          </el-button>
          <el-button class="filter-item" size="small" style="margin-left: 10px;" type="primary" v-waves
                     @click="modifyStoreArea('area', '1')" icon="el-icon-edit">启用
          </el-button>
        </el-col>
        <el-col :span="12" style="text-align: right">
          <el-input size="small" style="width: 200px" class="filter-item fsc-search" placeholder="库区名称-回车查询" v-model="listQuery.condition.name" @keyup.enter.native="searchClick"></el-input>
          <el-button class="filter-item" size="small" type="primary" v-waves icon="el-icon-search" @click="searchClick">
            搜索
          </el-button>
          <el-button class="filter-item" size="small" type="primary" v-waves icon="el-icon-circle-plus-outline" @click="moreClick">更多
          </el-button>
          <el-dropdown trigger="click" :hide-on-click=false style="float: right;margin-left: 10px">
            <span class="el-dropdown-link">
              <el-button class="filter-item" size="small" type="primary" v-waves>
                选择列
                <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <el-checkbox-group v-model="theadCheckVal">
                  <el-checkbox label="storeHouseName">仓库</el-checkbox>
                  <el-checkbox label="code">库区编码</el-checkbox>
                  <el-checkbox label="name">库区名称</el-checkbox>
                  <el-checkbox label="type">库区类型</el-checkbox>
                  <el-checkbox label="sort">分配排序</el-checkbox>
                  <el-checkbox label="maxStorage">最大存储量</el-checkbox>
                  <el-checkbox label="status">状态</el-checkbox>
                  <el-checkbox label="remark">备注</el-checkbox>
                </el-checkbox-group>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
      <div style="clean:both"></div>
    </div>
     <!--更多-->
    <div :class="{'search-transition':searchFlag,h0:true,hAuto:searchFlag,'search-content':true}">
      <el-form ref="form" :model="listQuery.condition" label-width="100px" :inline="true">
        <el-form-item label=库区类型:>
          <el-select v-model="listQuery.condition.type" placeholder="请选择库区类型">
            <el-option label="普通库区" value="10"></el-option>
            <el-option label="临时库区" value="20"></el-option>
            <el-option label="虚拟库区" value="30"></el-option>
            <el-option label="无单库区" value="40"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label=库区状态:>
          <el-select v-model="listQuery.condition.status" placeholder="请选择库区状态">
            <el-option label="正常" value="10"></el-option>
            <el-option label="禁用" value="20"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchClick" style="margin-left: 10px">查询</el-button>
          <el-button type="primary" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="clean:both"></div>
    <!--主列表-->
    <el-table ref="storeAreaTable" :data="storeAreaList" v-loading="listLoading" element-loading-text="加载中" border fit highlight-current-row
              style="width: 100%;margin-top:5px"
              @select="handleSelectionChange">
      <el-table-column type="selection" width="40"></el-table-column>
      <el-table-column align="center" label="序号" type="index" width="50"></el-table-column>
      <el-table-column :key="key" align="center" :width="value.width" v-for='(value,key) in tableThead' :label="value.title">
        <template slot-scope="scope">
          <div v-if="value.key === 'type'">{{scope.row[value.key] | storeAreaTypeFilter}}</div>
          <div v-else-if="value.key === 'status'">{{scope.row[value.key] | storeAreaStatusFilter}}</div>
          <div v-else>{{scope.row[value.key]}}</div>
        </template>
      </el-table-column>
    </el-table>
    <div v-show="!listLoading" class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.current" :page-sizes="[10,20,30,50]" :page-size="listQuery.size" layout="total, sizes, prev, pager, next, jumper" :total="listQuery.total">
      </el-pagination>
    </div>
    <!--编辑弹出框-->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogVisible" style="width: 80%":before-close="handleDialogClose">
      <el-form :rules="rules" ref="dataForm" :model="editObj" label-position="right" label-width="100px" style='width: 40%; margin-left:50px;'>
        <el-form-item label="库区编码：" prop="code">
          <el-input v-model="editObj.code" placeholder="请输入库区编码" :disabled="dialogStatus=='update'"></el-input>
        </el-form-item>
        <el-form-item label="库区名称：" prop="name">
          <el-input v-model="editObj.name" placeholder="请输入库区名称"></el-input>
        </el-form-item>
        <el-form-item label="所属仓库：" prop="storeHouseName">
          <el-input v-model="this.houseName" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label=库区类型:>
          <el-select v-model="editObj.type" placeholder="请选择库区类型">
            <el-option label="普通库区" value="10"></el-option>
            <el-option label="临时库区" value="20"></el-option>
            <el-option label="虚拟库区" value="30"></el-option>
            <el-option label="无单库区" value="40"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序：" prop="sort">
          <el-input v-model="editObj.sort"></el-input>
        </el-form-item>
        <el-form-item label="最大存储量：" prop="maxStorage">
          <el-input v-model="editObj.maxStorage"></el-input>
        </el-form-item>
        <el-form-item label=状态:>
          <el-select v-model="editObj.status" placeholder="请选择库区状态">
            <el-option label="正常" value="10"></el-option>
            <el-option label="禁用" value="20"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注：" prop="remark">
          <el-input v-model="editObj.remark"></el-input>
        </el-form-item>
        <el-form-item >
          <div class="bor">
            <span>说明：</span>
            <span>1.同一仓库，库区不可重复</span>
            <span>2.最大存储量可自行设置，0~99999</span>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleDialogClose">取 消</el-button>
        <el-button v-if="dialogStatus=='create'" @click="createStoreArea" type="primary" >确 定</el-button>
        <el-button v-else @click="updateStoreArea" type="primary">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
  import * as storeAreaAPI from '@/api/house/storeArea'
  import waves from '@/directive/waves' // 水波纹指令
  const defautlTableThead = [
    { key: 'storeHouseName', title: '仓库', width: '' },
    { key: 'code', title: '库区编码', width: '' },
    { key: 'name', title: '库区名称', width: '' },
    { key: 'type', title: '库区类型', width: '' },
    { key: 'sort', title: '分配排序', width: '' },
    { key: 'maxStorage', title: '最大存储量', width: '' },
    { key: 'status', title: '状态', width: '' },
    { key: 'remark', title: '备注', width: '' }
  ]
  export default {
    name: 'storeArea',
    directives: {
      waves
    },
    data() {
      return {
        theadCheckVal: [
          'id',
          'storeHouseId',
          'storeHouseName',
          'code',
          'name',
          'type',
          'sort',
          'maxStorage',
          'status',
          'remark'
        ],
        editObj: {},
        tableThead: defautlTableThead,
        listQuery: {
          current: 1,
          size: 10,
          total: 0,
          condition: {}
        },
        storeAreaList: [],
        multipleSelection: [],
        dialogVisible: false,
        listLoading: true,
        searchFlag: true,
        dialogStatus: '',
        houseName: this.$store.getters.currentStorehouse.name,
        textMap: {
          update: '编辑库区',
          create: '创建库区'
        },
        rules: {
          code: [{ required: true, message: '库区编码不能为空', trigger: 'change' }],
          name: [{ required: true, message: '库区名称不能为空', trigger: 'change' }],
          status: [{ required: true, message: '状态不能为空', trigger: 'change' }]
        }
      }
    },
    created() {
      this.list()
    },
    watch: {
      theadCheckVal(valArr) {
        this.tableThead = defautlTableThead.filter(v => {
          for (var i = 0; i < valArr.length; i++) {
            if (v.key === valArr[i]) {
              return v
            }
          }
        })
      }
    },
    methods: {
      list() {
        // 列表查询
        this.listLoading = true
        // 处理是否展开更多
        let queryParam = {}
        if (this.$data.searchFlag) {
          queryParam = this.$data.listQuery
        } else {
          Object.assign(queryParam, this.$data.listQuery)
          queryParam.condition = {
            name: this.$data.listQuery.condition.name
          }
        }
        queryParam.condition.houseId = this.$store.getters.currentStorehouse.id
        this.houseName = this.$store.getters.currentStorehouse.name
        storeAreaAPI.queryByPage(queryParam).then(result => {
          if (result.code === 0) {
            this.$data.storeAreaList = result.data.records
            this.$data.listQuery.total = result.data.total
            if (this.$data.storeAreaList && this.$data.storeAreaList.length >= 1) {
              this.houseName = this.$data.storeAreaList[0].storeHouseName
            }
            this.listLoading = false
          } else {
            this.listLoading = false
            this.$notify({
              title: '信息提示',
              message: result.message,
              type: 'error',
              duration: 2000
            })
          }
        }).catch(() => {
          this.listLoading = false
          this.$data.storeLocationList = null
        })
      },
      handleSizeChange(val) {
        // 分页size变化
        this.$data.listQuery.size = val
        this.list()
      },
      handleCurrentChange(val) {
        // 分页当前页变化
        this.$data.listQuery.current = val
        this.list()
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      resetTemp() {
        this.editObj = {
          id: null,
          storeHouseId: '',
          // storeHouseName: this.houseName,
          code: '',
          name: '',
          type: '',
          sort: '',
          maxStorage: '',
          status: '',
          remark: ''
        }
      },
      // type area ：表示库区 ；location：表示库位, handleType 0：表示禁用，1：表示取消禁用
      modifyStoreArea(type, handleType) {
        const that = this
        const field = 'status' // 验证字段
        let c = ''
        let d = '' // field 的数据状态
        if (handleType === '0') {
          c = '禁用'
          d = '20'
        }
        if (handleType === '1') {
          c = '启用'
          d = '10'
        }
        if (that.checkModifySelect(that.multipleSelection, d, field, c)) {
          const keyList = that.multipleSelection.map(item => item.id)
          const toParams = {
            keys: keyList.join(','),
            type,
            handleType
          }
          storeAreaAPI.batchUpdateStatus(toParams).then(result => {
            this.$message({
              title: '提示',
              message: '批量' + c + '修改成功',
              type: 'success',
              duration: 2000
            })
            this.list()
          }).catch((err) => {
            console.log('error', err)
          })
        }
      },
      // 检查是否选择单条
      checkModifySelect(selectRow, handleType, field, msg) {
        const l = selectRow.length
        if (l === 0) {
          this.$message({
            message: '未选择',
            type: 'warning',
            duration: 2000
          })
          return false
        }
        const b = selectRow.some(item => item[field] === handleType)
        if (b) {
          this.$message({
            message: '选中项有已' + msg + '项，不能进行' + msg,
            type: 'warning',
            duration: 2000
          })
          return false
        }
        return true
      },
      add() {
        this.resetTemp()
        this.dialogStatus = 'create'
        this.dialogVisible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      },
      createStoreArea() {
        if (!this.checkEditObj(this.editObj)) {
          return null
        }
        this.editObj.storeHouseId = this.$store.getters.currentStorehouse.id
        storeAreaAPI.addStoreArea(this.editObj).then(result => {
          if (result.code === 0) {
            this.listLoading = false
            this.handleDialogClose()
          }
        })
      },
      handleDialogClose() {
        // 关闭
        this.dialogVisible = false
        this.list()
      },
      changeStoreArea() {
        // 注释
        const selects = this.multipleSelection
        if (selects.length === 0) {
          this.$message({
            title: '错误提示',
            message: '请选择要修改的库区',
            type: 'warning',
            duration: 2000
          })
        } else if (selects.length > 1) {
          this.$message({
            title: '错误提示',
            message: '只能选择一行数据',
            type: 'warning',
            duration: 2000
          })
        } else {
          this.dialogStatus = 'update'
          this.dialogVisible = true
          this.editObj = this.multipleSelection[0]
        }
      },
      updateStoreArea() {
        if (!this.checkEditObj(this.editObj)) {
          return null
        }
        this.editObj.storeHouseId = this.$store.getters.currentStorehouse.id
        storeAreaAPI.updateStoreArea(this.editObj).then(result => {
          if (result.code === 0) {
            this.listLoading = false
            this.handleDialogClose()
          }
        })
      },
      checkEditObj(val) {
        if (val.code === null || val.code === '') {
          this.$message({
            title: '警告',
            message: '库区编码不能为空',
            type: 'warning',
            duration: 2000
          })
          return false
        }
        if (val.name === null || val.name === '') {
          this.$message({
            title: '警告',
            message: '库区名称不能为空',
            type: 'warning',
            duration: 2000
          })
          return false
        }
        if (val.type === null || val.type === '') {
          this.$message({
            title: '警告',
            message: '库区类型不能为空',
            type: 'warning',
            duration: 2000
          })
          return false
        }
        return true
      },
      moreClick() {
        // 更多click
        this.$data.searchFlag = !this.$data.searchFlag
      },
      searchClick() {
        // 搜索
        this.list()
      },
      reset() {
        this.$data.listQuery.condition = {
          houseId: this.$store.getters.currentStorehouse.id,
          name: null,
          type: null,
          status: null
        }
        this.list()
      }
    }
  }
</script>
<style type="text/scss" lang="scss" scoped>
  .bor{
    border:1px dashed gray;
    width:300px;
    padding: 10px;
    span {
      display:block;
      color:forestgreen;
      line-height: 18px;
    }
  }
</style>
